<!--课程内容  -->
<template>
  <div class="box"> 
        <drawer title="课程菜单" :display.sync="display" :inner="true" :width="drawerWidth" >
            <el-tabs v-model="activeName" class="tabs">
              <el-tab-pane label="课程目录" name="first">
                 <div>
                   <el-table
                     :data="dataTable"
                     style="width: 100%">
                     <el-table-column
                       header-align="center"
                       label="标题">
                       <template slot-scope="scope">
                          课时{{scope.row.order}}：{{scope.row.title}}
                       </template>
                     </el-table-column>
                     <el-table-column
                       header-align="center"
                       align="center"
                       >
                       <template slot-scope="scope">
                         <el-button type="text">开始学习</el-button>
                       </template>
                     </el-table-column>
                   </el-table>
                 </div>
              </el-tab-pane>
              <el-tab-pane label="课程资源" name="second">

              </el-tab-pane>
            </el-tabs>
        </drawer>
        <video controls  loop :src="VedioUrl" id="displayer" hidden>
          <p>Your browser does not support the audio</p>
        </video>
    <div class="course-header">
      <page-header @back="goBack" content="课程讲解"></page-header>
      <div>
       <el-button type="primary" @click="display = true" icon="el-icon-arrow-left">课程菜单</el-button>
      </div>
    </div>
    <el-progress :percentage="progress"></el-progress>
    <div class="display">
      <el-button v-if="ifDisplay" type="danger" plain @click="stopDispaly()"
        >暂停</el-button
      >
      <el-button v-else type="primary" plain @click="displayVideo()">播放</el-button>
    </div>

    <div class="container">
      <el-row :gutter="10">
        <el-col :span="12">
          <el-card>
            <div slot="header">
              <el-row :gutter="10">
                <el-col :span="12"><el-button>源代码</el-button></el-col>
                <el-col :span="12">
                  <el-button
                    type="primary"
                    class="submitBIN"
                    @click="runHtml()"
                  >
                    开始运行
                  </el-button>
                </el-col>
              </el-row>
            </div>
            <div class="card_body">
              <textarea ref="HtmlEditor"> </textarea>
            </div>
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card>
            <div slot="header">
              <el-button>运行结果</el-button>
            </div>
            <div class="card_body" v-html="htmlSourceCode"></div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
//引入全局实例
import codeMirror from "codemirror";
//核心样式
import "codemirror/lib/codemirror.css";
//语法高亮
import "codemirror/mode/htmlmixed/htmlmixed.js";
import "jquery/dist/jquery.js";
import "codemirror/mode/javascript/javascript.js";
import "codemirror/mode/css/css.js";
import PageHeader from "../page-header.vue";
import you from "../../../assets/vedio/you.mp3"
const CodeMirror = window.CodeMirror || codeMirror;
//HTML/CSS/JS在线编辑器
import drawer from '../drawer'
export default {
  
  components: { PageHeader,drawer },
  props: { content_id: String ,
          courseInfoId:String
          },
  data() {
    return {
      ifDisplay: false,
      progress: 0,
      progressData: 0,
      schedule: "",
      display: false,
      drawerWidth: '400px',
      activeName:'first',
      dataTable:[],
      VedioUrl:you,
      htmlSourceCode:
        "<!DOCTYPE html>\n" +
        "<html>\n" +
        "<head>\n" +
        '<meta charset="utf-8">\n' +
        "<title>菜鸟教程(runoob.com)</title>\n" +
        "</head>\n" +
        "<body>\n" +
        "\n" +
        "<h1>我的第一个标题</h1>\n" +
        "<p>我的第一个段落。</p>\n" +
        "\n" +
        "" +
        "</body>\n" +
        "</html>", // html代码
      editorCodeMirror: null, // HTML编辑器文本域
      courseInfoList: [
        {
          code:
            "<!DOCTYPE html>\n" +
            "<html>\n" +
            "<head>\n" +
            '<meta charset="utf-8">\n' +
            "<title></title>\n" +
            "</head>\n" +
            "<body>\n" +
            "</body>\n" +
            "</html>", //html代码
        },
        {
          code:
            "<!DOCTYPE html>\n" +
            "<html>\n" +
            "<head>\n" +
            '<meta charset="utf-8">\n' +
            "<title>OnlyCode</title>\n" +
            "</head>\n" +
            "<body>\n" +
            "</body>\n" +
            "</html>", //html代码
        },
        {
          code:
            "<!DOCTYPE html>\n" +
            "<html>\n" +
            "<head>\n" +
            '<meta charset="utf-8">\n' +
            "<title>OnlyCode</title>\n" +
            "</head>\n" +
            "<body>\n" +
            "<h1>我</h1>\n" +
            "</body>\n" +
            "</html>", //html代码
        },
        {
          code:
            "<!DOCTYPE html>\n" +
            "<html>\n" +
            "<head>\n" +
            '<meta charset="utf-8">\n' +
            "<title>OnlyCode</title>\n" +
            "</head>\n" +
            "<body>\n" +
            "<h1>我的</h1>\n" +
            "</body>\n" +
            "</html>", //html代码
        },
        {
          code:
            "<!DOCTYPE html>\n" +
            "<html>\n" +
            "<head>\n" +
            '<meta charset="utf-8">\n' +
            "<title>OnlyCode</title>\n" +
            "</head>\n" +
            "<body>\n" +
            "<h1>我的第</h1>\n" +
            "</body>\n" +
            "</html>", //html代码
        },
        {
          code:
            "<!DOCTYPE html>\n" +
            "<html>\n" +
            "<head>\n" +
            '<meta charset="utf-8">\n' +
            "<title>OnlyCode</title>\n" +
            "</head>\n" +
            "<body>\n" +
            "<h1>我的第一</h1>\n" +
            "</body>\n" +
            "</html>", //html代码
        },
        {
          code:
            "<!DOCTYPE html>\n" +
            "<html>\n" +
            "<head>\n" +
            '<meta charset="utf-8">\n' +
            "<title>OnlyCode</title>\n" +
            "</head>\n" +
            "<body>\n" +
            "<h1>我的第一个</h1>\n" +
            "</body>\n" +
            "</html>", //html代码
        },
        {
          code:
            "<!DOCTYPE html>\n" +
            "<html>\n" +
            "<head>\n" +
            '<meta charset="utf-8">\n' +
            "<title>OnlyCode</title>\n" +
            "</head>\n" +
            "<body>\n" +
            "<h1>我的第一个标</h1>\n" +
            "</body>\n" +
            "</html>", //html代码
        },
        {
          code:
            "<!DOCTYPE html>\n" +
            "<html>\n" +
            "<head>\n" +
            '<meta charset="utf-8">\n' +
            "<title>OnlyCode</title>\n" +
            "</head>\n" +
            "<body>\n" +
            "<h1>我的第一个标题</h1>\n" +
            "</body>\n" +
            "</html>", //html代码
        },
        {
          code:
            "<!DOCTYPE html>\n" +
            "<html>\n" +
            "<head>\n" +
            '<meta charset="utf-8">\n' +
            "<title>OnlyCode</title>\n" +
            "</head>\n" +
            "<body>\n" +
            "<h1>我的第一个标题</h1>\n" +
            "<p>\n" +
            "</body>\n" +
            "</html>", //html代码
        },
        {
          code:
            "<!DOCTYPE html>\n" +
            "<html>\n" +
            "<head>\n" +
            '<meta charset="utf-8">\n' +
            "<title>OnlyCode</title>\n" +
            "</head>\n" +
            "<body>\n" +
            "<h1>我的第一个标题</h1>\n" +
            "<p></p>\n" +
            "</body>\n" +
            "</html>", //html代码
        },
        {
          code:
            "<!DOCTYPE html>\n" +
            "<html>\n" +
            "<head>\n" +
            '<meta charset="utf-8">\n' +
            "<title>OnlyCode</title>\n" +
            "</head>\n" +
            "<body>\n" +
            "<h1>我的第一个标题</h1>\n" +
            "<p>我</p>\n" +
            "</body>\n" +
            "</html>", //html代码
        },
        {
          code:
            "<!DOCTYPE html>\n" +
            "<html>\n" +
            "<head>\n" +
            '<meta charset="utf-8">\n' +
            "<title>OnlyCode</title>\n" +
            "</head>\n" +
            "<body>\n" +
            "<h1>我的第一个标题</h1>\n" +
            "<p>我的</p>\n" +
            "</body>\n" +
            "</html>", //html代码
        },
        {
          code:
            "<!DOCTYPE html>\n" +
            "<html>\n" +
            "<head>\n" +
            '<meta charset="utf-8">\n' +
            "<title>OnlyCode</title>\n" +
            "</head>\n" +
            "<body>\n" +
            "<h1>我的第一个标题</h1>\n" +
            "<p>我的第</p>\n" +
            "</body>\n" +
            "</html>", //html代码
        },
        {
          code:
            "<!DOCTYPE html>\n" +
            "<html>\n" +
            "<head>\n" +
            '<meta charset="utf-8">\n' +
            "<title>OnlyCode</title>\n" +
            "</head>\n" +
            "<body>\n" +
            "<h1>我的第一个标题</h1>\n" +
            "<p>我的第一</p>\n" +
            "</body>\n" +
            "</html>", //html代码
        },
        {
          code:
            "<!DOCTYPE html>\n" +
            "<html>\n" +
            "<head>\n" +
            '<meta charset="utf-8">\n' +
            "<title>OnlyCode</title>\n" +
            "</head>\n" +
            "<body>\n" +
            "<h1>我的第一个标题</h1>\n" +
            "<p>我的第一个</p>\n" +
            "</body>\n" +
            "</html>", //html代码
        },
        {
          code:
            "<!DOCTYPE html>\n" +
            "<html>\n" +
            "<head>\n" +
            '<meta charset="utf-8">\n' +
            "<title>OnlyCode</title>\n" +
            "</head>\n" +
            "<body>\n" +
            "<h1>我的第一个标题</h1>\n" +
            "<p>我的第一个段</p>\n" +
            "</body>\n" +
            "</html>", //html代码
        },
        {
          code:
            "<!DOCTYPE html>\n" +
            "<html>\n" +
            "<head>\n" +
            '<meta charset="utf-8">\n' +
            "<title>OnlyCode</title>\n" +
            "</head>\n" +
            "<body>\n" +
            "<h1>我的第一个标题</h1>\n" +
            "<p>我的第一个段落</p>\n" +
            "</body>\n" +
            "</html>", //html代码
        },
        {
          code:
            "<!DOCTYPE html>\n" +
            "<html>\n" +
            "<head>\n" +
            '<meta charset="utf-8">\n' +
            "<title>OnlyCode</title>\n" +
            "</head>\n" +
            "<body>\n" +
            "<h1>我的第一个标题</h1>\n" +
            "<p>我的第一个段落。</p>\n" +
            "</body>\n" +
            "</html>", //html代码
        },
        {
          code:
            "<!DOCTYPE html>\n" +
            "<html>\n" +
            "<head>\n" +
            '<meta charset="utf-8">\n' +
            "<title>OnlyCode</title>\n" +
            "</head>\n" +
            "<body>\n" +
            '<h1 style="color:red">我的第一个标题</h1>\n' +
            "<p>我的第一个段落。</p>\n" +
            "</body>\n" +
            "</html>", //html代码
        },
      ],
      index: 0,
    };
  },
  mounted() {
    // 初始化
    this.initCodeMirror();
    this.getChapterList();
  },

  methods: {
    //返回父组件
    goBack() {
      this.$emit("changeContentShow");
    },
    initCodeMirror() {
      // 初始化编辑器实例，传入需要被实例化的文本域对象和默认配置
      this.editorCodeMirror = CodeMirror.fromTextArea(this.$refs.HtmlEditor, {
        mode: "text/html", // 选择对应代码编辑器的语言
        tabSize: 2, // 缩进格式
        lineNumbers: true, // 显示行号
        line: true,
      });
      this.editorCodeMirror.setSize("100%", "700px"); // 设置编辑器大小
      this.editorCodeMirror.setValue(this.htmlSourceCode);
    },
    runHtml() {
      // 运行html
      this.htmlSourceCode = this.editorCodeMirror.getValue();
    },
    //播放
    displayVideo() {
      this.ifDisplay = true;
      this.schedule = setInterval(() => {
        this.nextTimeCode();
      }, 500);
      //播放音频
      var video = document.getElementById("displayer");
      video.play();
    },
    //停止播放
    stopDispaly() {
      this.ifDisplay = false;
      clearInterval(this.schedule);
      //暂停音频
      var video = document.getElementById("displayer");
      video.pause();
    },

    //下一帧
    nextTimeCode() {
      if (this.index < this.courseInfoList.length) {
        this.progress = parseInt(
          ((this.progressData += 1) / this.courseInfoList.length) * 100
        );
        console.log(this.progress);
        this.htmlSourceCode = this.courseInfoList[(this.index += 1)].code;
        this.editorCodeMirror.setValue(this.htmlSourceCode);
        this.editorCodeMirror.refresh(); //刷新编辑器
      }
    },

     //获得章节列表
    getChapterList(){
      this.$http({
        url:this.$http.adornUrl('/stu/explore/chapter'),
        method:'get',
        params:this.$http.adornParams({
          course_info_id:this.courseInfoId
        })
      }).then(({data})=>{
           if(data&&data.code === 0){
             this.dataTable = data.data
           }else{
             this.$message(data.msg)
           }
      })
    },
  },
};
</script>

<style  scoped>
.card_body {
  height: 350px;
}
.container {
  height: 600px;
  width: 98%;
  margin-top: 20px;
}
.course-header {
  display: flex;
  justify-content: space-between;
}
.display {
  margin-top: 10px;
  margin-left: 20px;
}
.submitBIN {
  float: right;
}
.tabs{
  font-size: 18px;
}
</style>
